<!-- 任务详情页 -->
<template>
  <el-card :body-style="{ height: '81vh' }">
    <div>
      <h1 class="typeTitle">待办事项</h1>
    </div>
    <!-- <el-form ref="FormRef" :model="detForm" inline="true" style="line-height:20px;">
      <p><span>任务编号</span><span style="margin-left:65px">{{ detForm.id }}</span></p>
      <p>任务标题 :<span style="margin-left:65px">{{ detForm.title }}</span></p>
      <p>任务内容 :<span style="margin-left:65px">{{ detForm.content }}</span></p>
      <div>
        录音
        <el-button v-if="detForm.files[0]" plain style="width:100px; margin-left: 100px"><a
            :href="detForm.files[0].fileUrl">下载</a></el-button>
      </div>
      <div class="image__preview">
        图片
        <el-image style="width: 130px; height: 130px; margin-left: 90px; vertical-align:middle" :src="url"
          :zoom-rate="1.2" :preview-src-list="srcList" title="点击查看图片" :initial-index="1" fit="cover" v-if="url" />
      </div>
      <p>工作分类 : <span style="margin-left:65px">{{ detForm.classify }}</span></p>
      <p>优先级 : <span style="margin-left:65px">{{ detForm.priority }}</span></p>
      <p>执行人 :<span style="margin-left:65px">{{
        JSON.stringify(detForm.executors).replace('[', '').replace(']', '').replace(/"/g, "") }}</span></p>
      <p>时间提醒 :<span style="margin-left:65px">{{ detForm.reminderTime }}</span></p>
      <p>截止时间 :<span style="margin-left:65px">{{ detForm.deadline }}</span></p>
      <el-button class="submit" type="info" size="large" @click="handleSubmit">确定完成</el-button>
    </el-form> -->
    <div class="drawer-main">
      <p><span class="tit">任务编号</span><i>：</i><span class="con">{{ detForm.id }}</span></p>
      <p><span class="tit">任务标题</span><i>：</i> <span class="con">{{ detForm.title }}</span></p>
      <p><span class="tit">任务内容</span><i>：</i><span class="con">{{ detForm.content }}</span></p>

      <!-- <a :href="detForm.files[0].url">下载录音</a> -->
      <p><span class="tit">录音</span><i>：</i> <el-button @click="onPreviewPDF" v-if="detForm.files[0]" plain style="width:100px;">下载录音</el-button></p>

      <p><span class="tit">图片</span><i>：</i>
      <div class="upload-single-img" v-for="(item, index) in detForm.images">
        <img class="report-img" :src="item.url" :key="index" alt="" @click.native.prevent="handlePreview(index)">
        <el-image-viewer v-if="dialogVisible" :url-list="[url]" @close="close" />
      </div>
      <!-- <el-image v-for="(item, index) in url" :key="index" :src="item.url" fit="contain" style="margin-right: 10px"
          @click.native.prevent="handlePreview(index)" /> -->

      </p>

      <p><span class="tit">工作分类</span><i>：</i>{{ detForm.classify }}</p>
      <p><span class="tit">优先级</span><i>：</i><span class="con">{{ detForm.priority }}</span></p>
      <p><span class="tit">执行人</span><i>：</i><span class="con">{{ JSON.stringify(detForm.executors).replace('[',
        '').replace(']', '').replace(/"/g, "") }}</span></p>
      <p><span class="tit">时间提醒</span><i>：</i><span class="con">{{ detForm.reminderTime }}</span></p>
      <p><span class="tit">截止时间</span><i>：</i><span class="con">{{ detForm.deadline }}</span></p>
      <el-button class="submit" type="info" size="large" @click="handleSubmit">确定完成</el-button>
    </div>
    <!-- <el-dialog :visible.sync="dialogVisible">
      <span>1221212</span>
      <img :src="srcList[currentIndex]" style="max-width: 100%" />
    </el-dialog> -->
  </el-card>
</template>

<script setup>
import { useList } from '../../store';
import { submitDet, taskDetail } from '../../api/index'
import { onBeforeMount, onMounted, ref } from 'vue';

//引入pinia details 任务数据
const store = useList()
const detForm = store.details
const url = ref()
const srcList = detForm.srcList


const dialogVisible = ref(false)
const handlePreview = (index) => {
  console.log(srcList[index], 'index');
  url.value = srcList[index]
  dialogVisible.value = true;

}
const close = () => { //必须要这个事件 不然点击右上角关闭按钮没有反应
  dialogVisible.value = false
    }

//确定完成
const handleSubmit = () => {
  submitDet(detForm.id).then((res) => {
  })
}

// 下载
function onPreviewPDF(val) {
  // let materialList = JSON.parse(val.jsonFile)
  // window.open(`${detForm.}/${materialList[0].fileUrl}`);
  window.open(detForm.files[0].url,"_blank");
}


//预览数据处理
// const previewData = () => {
//   let data = []
//   detForm.images.map(e => {
//     data.push(e.url)
//   })
//   srcList.value = Object.values(data)
// }

// onMounted(() => {
//   upDetail()
// })

</script>

<style lang="less" scoped>
.el-card {
  margin-top: 10px;
  font-size: 13px;
}

.typeTitle {
  box-sizing: border-box;
  display: inline-block;
  padding: 15px;
  /* margin: 10px; */
  border: 1px solid black;
}

.el-form p,
.el-form div {
  padding: 8px;
}

.el-image__error .image-slot {
  font-size: 15px;
}

.el-form--inline .el-form-item {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 2px;
  /* margin-bottom: 10px; */
  align-items: baseline;
}

.el-button {
  font-size: 12px;
}

.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

:deep(.submit) {
  display: block;
  font-size: 14px;
  margin: 0 auto;
}

.upload-single-img {
  .report-img {
    margin-left: 10px;
    display: block;
    width: 120px;
    height: 120px;
    cursor: pointer;
  }

  .report-img:nth-child(2) {
    margin-left: 20px;
    display: block;
    width: 150px;
    height: 150px;
    cursor: pointer;
  }

  .report-img:nth-child(3) {
    margin-left: 20px;
    display: block;
    width: 150px;
    height: 150px;
    cursor: pointer;
  }
}


.drawer-main {
  width: 100%;
  margin-top: 10px;
  padding: 16px 0px;

  p {
    display: flex;
    font-size: 15px;
    color: #333;
    line-height: 18px;
    margin-bottom: 20px;
    word-break: break-all;
    word-wrap: break-word;

    span {
      display: inline-block;
    }

    .tit {
      width: 80px;
      text-align: justify;
      text-align-last: justify;
    }

    i {
      display: inline-block;
      width: 30px;
      font-style: normal;
      font-weight: normal;
    }

    a {
      flex: 1;
      font-style: normal;
      font-weight: normal;
      cursor: pointer;
      color: #4286ff;
    }

    .con {
      flex: 1;
    }
  }
}
</style>
